<template>
    <ex-dialog
      width="800px"
      class="ex-diolog"
      :title="title"
      :visible="visible"
      :close-on-click-modal="false"
      @closeDialog="handleClose"
    >
      <div class="main" v-loading="loading">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class="demo-ruleForm" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="已选赚卡数：">
                <div>{{id.length}}</div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="选择标签：" prop="tagId">
                <el-select v-model="ruleForm.tagId" placeholder="请选择" size="small" filterable>
                  <el-option v-for="item in tagList" :key="item.id" :label="item.value" :value="item.id">
                  </el-option>
                </el-select>  
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="button_box">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="primary"
            :loading="AgreeLoading"
            @click="submitForm('ruleForm')"
          >确认提交</el-button>
        </div>
      </div>
        
    </ex-dialog>
  </template>
  <script>
  import Loading from "@/components/Loading/index";
  // api
  import {
    batchTag,
    addTagSelect,
  } from "@/api/merchantsNFR/yeCard"; 
  import { array } from 'jszip/lib/support';
  export default {
    components: {
      Loading,
    },
    props: {
      visible: Boolean,
      id: Array,
      pathType: String,
    },
    data() {
      /* 大于0的整数 */
      var checkInteger = (rule, value, callback) => {
        //总库存限制数量校验
        let regNumber = /^\+?[0-9]\d*$/; //大于0的正整数
        if (!value ) {
          return callback(new Error("请输入"));
        } else if (regNumber.test(value) == false) {
          return callback(new Error("请输入大或等于0正整数"));
        } else {
          return callback();
        }
      };
      return {
        labelWidth: "150px",
        inputWidth: "420px",
        title: "批量配置标签",
        loading: false,
        disabled: false,
        AgreeLoading: false,
        tagList: [],
        ruleForm: {
          merchantEquityIdList: [],
          tagId: '',
        },
        rules: {
          tagId: [{required: true,message: "请选择",trigger: ['blur', 'change']}],
        },
      };
    },
    computed: {},
    created() {
      this.getStatusList() 
      this.getTag()
      this.ruleForm.merchantEquityIdList = this.id
      console.log('this.id',this.id)
    },
    mounted() {
      
    },
    computed: {},
    methods: {
      //获取活动状态字典
      getStatusList() {
        var dictType = "equity_function_type";
        this.$getSelectList(dictType)
          .then((res) => {
            var arr = [
              {
                id: "",
                value: "全部",
              },
            ];
            this.functionTypeList = arr.concat(res.result[0].dictList);
          })
          .finally(() => {});
      },
      //获取标签下拉
      getTag(){
        addTagSelect().then(res => {
          this.tagList = res.result
        })
      },


      //取消
      handleClose(formName) {
        this.$emit("update:visible", false);
      },
      submitForm(formName) {
        console.log(this.ruleForm);
        //创建确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.AgreeLoading = true
            var data = {
              ...this.ruleForm
            }
            batchTag(data).then(res => {
              this.handleClose()
              this.$message.success('设置成功')
              this.$emit('success')
              this.AgreeLoading = false
              }).finally(()=>{
                this.AgreeLoading = false
              })
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      editForm(formName, status) {
        //编辑确定
        this.$refs[formName].validate(valid => {
          if (valid) {
            
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    }
  };
  </script>
  <style lang="scss" scoped>
  .ex-diolog {
    ::v-deep .ex--dialog--footer {
      border: none !important;
      padding: 0 !important;
    }
  
    ::v-deep .ex--dialog--main {
      padding: 10px 20px !important;
    }
  }
  .el-select{
    width: 100%;
  }
  .button_box{
    display: flex;
    justify-content: center;
    margin-top: 24px;
  }
  </style>
  